// To create your own visualization,
// you need to implement a constructor
// and a draw method.

// Namespace, implemented as a global variable.
var madscience = {};

// xlsMap class constructor.
// Parameters:
//   container: the HTML element where the visualization
//              will be rendered in.
madscience.xlsMap = function(container) {
  // Stores the container HTML element.
  this.containerElement = container;
  var map;
  var entries;
  
  var geocoder = null;
  var numGeocodeReplies = 0;
  var columns = new Array();
  var baseIcon = null;
  var bounds = null;
  var unfoundMarkers = new Array();
  var markerOverlays = new Array();
  var highlightCircle = null;
  var loaded = false;
  var polys = [];
/*  var ss = SpreadsheetApp.getActiveSpreadsheet(),
    sheet = ss.getActiveSheet(),
    activeRange = ss.getActiveRange(),
    settings = {};*/
}

// xlsMap.draw() method.
// Parameters:
//   data: The google.visualization.DataTable to display.
//   options: name/value map of options. 
//            You should document the specific options
//            your visualization supports.
//            This visualization support only "shoTip" boolean option.
madscience.xlsMap.prototype.draw = function(data, options) {
  // showLineNumber boolean option.
  var showTip = options && options.showTip;
  
  map = new GMap2(document.getElementById('MyMap'));
  map.addControl(new GSmallMapControl());
  map.addControl(new GMapTypeControl());
  map.setCenter(new GLatLng(37.0625,-95.677068), 3);
  geocoder = new GClientGeocoder();
  GEvent.addListener(map, "zoomend", function() {
    clearPolys();
  });
  baseIcon = new GIcon();
  baseIcon.shadow = "http://www.google.com/mapfiles/shadow50.png";
  baseIcon.iconSize = new GSize(20, 34);
  baseIcon.shadowSize = new GSize(37, 34);
  baseIcon.iconAnchor = new GPoint(9, 34);
  baseIcon.infoWindowAnchor = new GPoint(9, 2);
  baseIcon.infoShadowAnchor = new GPoint(18, 25);
}

// Helper function.
madscience.xlsMap.prototype.escapeHtml = function(text) {
  if (text == null) {
    return '';
  }
  return text.replace(/&/g, '&').
         replace(/</g, '<').
         replace(/>/g, '>').
         replace(/"/g, '"');
}

madscience.xlsMap.prototype.clearPolys = function() {
  for (var i = 0; i < polys.length; i++) {
    try {
      map.removeOverlay(polys[i]);
    } catch (e) {}
  }
  if (highlightCircle) {
    map.removeOverlay(highlightCircle);
  }
}

// This is a simple usage of the visualization.
var drawVisualization = function() {
  // Create and populate a data table.
  var data = google.visualization.arrayToDataTable([
    ['Name', 'Address', 'Lat', 'Lon', 'Volume'],
    ['BrandFashion', '123001, Москва, Вспольный переулок, 3, стр. 1', 55.759708, 37.5864365, 3700],
    ['ClassicGifts', '111033, Москва, ул. Золоторожский вал, д. 32, стр. 4', 55.7494134, 37.6828475, 800],
    ['ItalClub', '115280, Москва, Автозаводская ул., д.23', 55.7034309, 37.6400065, 3000],
    ['Leo Gets', '115093, Москва, ул. Павла Андреева, д.4', 55.7214108, 37.6261776, 35400],
  ]);
  
/*  // Instantiate our table object without line numbers.
  var vis_without_line_numbers = new madscience.xlsMap(document.getElementById('visualization_without_line_numbers'));
  
  // Draw our table with the data we created locally.
  vis_without_line_numbers.draw(data, {showLineNumber: false});

  // Instantiate our table object with line numbers.
  var vis_with_line_numbers = new madscience.xlsMap(document.getElementById('visualization_with_line_numbers')); */
  
  var map = new madscience.xlsMap(document.getElementById('MyMap'));

  // Define a slider control for the 'Volume' column
  var slider = new google.visualization.ControlWrapper({
    'controlType': 'NumberRangeFilter',
    'containerId': 'control1',
    'options': {
      'filterColumnLabel': 'Volume',
      'ui': {'labelStacking': 'vertical'}
    }
  });


  // Create the dashboard.
  new google.visualization.Dashboard(document.getElementById('dashboard')).
    // Configure the slider to affect the piechart
    bind(slider, map).draw(data);

/*  google.visualization.events.addListener(table, 'sort',
    function(event) {
      data.sort([{column: event.column, desc: !event.ascending}]);
      chart.draw(view);
    }
  );*/
}
​